onload = () => {
  const p_id=$util.getPageParam('seeProject')
  const q_id=$util.getPageParam('q_id')
  fetchSingleSelectInfo(p_id,q_id)
  fetchMultiSelectInfo(p_id,q_id)
}
let singleSelectProblems=[];
let multiSelectProblems=[];
const fetchSingleSelectInfo=(p_id,q_id)=>{
  let params={
    p_id,q_id
  }
  $.ajax({
    url: API_BASE_URL + '/showSingleSelectInfoData',
    type: "POST",
    data: JSON.stringify(params),
    dataType: "json",
    contentType: "application/json",
    success(res) {
      singleSelectProblems = res.data
      res.data.map((item, index) => {
        $('#problem').append(`
          <div id="question${item.rank}" style="width: 1000px;height:400px;"></div>
        `)
        var xAxisData = [];
        var seriesData = [];
        var percentData=[];
        var total=0;
        item.options.forEach(function(option) {
          xAxisData.push(option.options_id + ' - ' + option.content);
          seriesData.push(option.amount);
          total+=option.amount;
        });
        item.options.forEach(function(option) {
          percentData.push(option.amount/total)
        });
        const charid='question'+item.rank
        var myChart = echarts.init(document.getElementById(charid))
        var option = {
          title: {
            text: '单选：题号'+item.rank+":"+item.problem_content
          },
          yAxis: {
            type: 'category',
            data: xAxisData
          },
          xAxis: {
            type: 'value'
          },
          series: [{
            type: 'bar',
            data: seriesData,
            label: {
              show: true,
              position: 'insideRight',
              formatter: function(params) {
                var percentage = (params.value / total * 100).toFixed(2) + '%';
                return params.value + ' (' + percentage + ')';
              }
            },
            itemStyle: {
              barBorderRadius: [0, 0, 0, 0], // 统一设置四个角的圆角大小
              normal: {
                //这里是重点
                color: function (params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#3d8d91', '#0092FF', '#0061FE', '#002099', '#000682'];
                  return colorList[params.dataIndex]
                }
              }
            }
          }],
          tooltip: {
            trigger: 'axis', // 鼠标悬浮触发类型
            formatter: '{b}：{c}', // 提示框内容格式化
            axisPointer: { // 坐标轴指示器配置项
              type: 'shadow' // 阴影指示器
            }
          },
          toolbox: {
            show: true,
            feature: {
              magicType: {type: ['line', 'bar']}//此处最新版本echarts可设置三个值（stack-堆叠模式）,可自行查看echarts文档
            }
          }
        };
        myChart.setOption(option);
      })
    }
      }
  )
}
const fetchMultiSelectInfo=(p_id,q_id)=>{
  let params={
    p_id,q_id
  }
  $.ajax({
        url: API_BASE_URL + '/showMultiSelectInfoData',
        type: "POST",
        data: JSON.stringify(params),
        dataType: "json",
        contentType: "application/json",
        success(res) {
          multiSelectProblems = res.data
          res.data.map((item, index) => {
            $('#problem').append(`
          <div id="question${item.rank}" style="width: 1000px;height:400px;"></div>
        `)
            var xAxisData = [];
            var seriesData = [];
            var percentData=[];
            var total=0;
            item.options.forEach(function(option) {
              xAxisData.push(option.options_id + ' - ' + option.content);
              seriesData.push(option.amount);
              total+=option.amount;
            });
            item.options.forEach(function(option) {
              percentData.push(option.amount/total)
            });
            const charid='question'+item.rank
            var myChart = echarts.init(document.getElementById(charid))
            var option = {
              title: {
                text: '多选：题号'+item.rank+":"+item.problem_content
              },
              yAxis: {
                type: 'category',
                data: xAxisData
              },
              xAxis: {
                type: 'value'
              },
              series: [{
                type: 'bar',
                data: seriesData,
                label: {
                  show: true,
                  position: 'insideRight',
                  formatter: function(params) {
                    var percentage = (params.value / total * 100).toFixed(2) + '%';
                    return params.value + ' (' + percentage + ')';
                  }
                },
                itemStyle: {
                  barBorderRadius: [0, 0, 0, 0], // 统一设置四个角的圆角大小
                  normal: {
                    //这里是重点
                    color: function (params) {
                      //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                      var colorList = ['#3d8d91', '#0092FF', '#0061FE', '#002099', '#000682'];
                      return colorList[params.dataIndex]
                    }
                  }
                }
              }],
              tooltip: {
                trigger: 'axis', // 鼠标悬浮触发类型
                formatter: '{b}：{c}', // 提示框内容格式化
                axisPointer: { // 坐标轴指示器配置项
                  type: 'shadow' // 阴影指示器
                }
              },
              toolbox: {
                show: true,
                feature: {
                  magicType: {type: ['line', 'bar']}//此处最新版本echarts可设置三个值（stack-堆叠模式）,可自行查看echarts文档
                }
              }
            };
            myChart.setOption(option);
          })
        }
      }
  )
}
